<template>
  <div id="box">

    <div class="photo">
        <div class="back" @click="back()"></div>
    </div>
    
    <div class="shop1">
        <div class="con1">
            <div class="pho1">
                <img src="https://file05.c.hihonor.com/pimages//product/6936520800919/428_428_58A7C400E67901A19D0C67E6F262C0CCA648DF255E1AEABAmp.png" alt="">
            </div>
            <div class="content1">
                <div class="title1">荣耀X30i</div>
                <div class="cheap1">限时优惠100元</div>
                <span class="price1">￥1299</span>
                <span class="buy1">立即购买></span>
            </div>
        </div>
    </div>

    <div class="shops" v-for="(v,index) in moreshop" :key="index">
        <div class="con">
            <div class="pho">
                <img :src="v.src" alt="">
            </div>
            <div class="content">
                <div class="title">{{v.title}}</div>
                <div class="cheap">{{v.cheap}}</div>
                <span class="price">{{v.price}}</span>
                <span class="buy">{{v.buy}}</span>
            </div>
        </div>
    </div>

  </div>
</template>

<script>
export default {
    data(){
        return{
            moreshop:[]
        }
    },
    mounted(){
        this.$http({
            url:"  http://localhost:3000/SeeMoreShop",
            method:"GET"
        }).then(res=>{
            this.moreshop=res.data;
        })
    },
    methods:{
        back(){
            this.$router.push('/myhome')
        }
    }
}
</script>

<style lang="scss" scoped>
    #box{
        position: relative;
        background-color: #f2f2f2
    }
    .back{
        position: absolute;
        top: .625rem;
        left: .625rem;
        width: 1.875rem;
        height: 1.875rem;
        background: url() no-repeat;
        background-size: 1.875rem;
    }
    .photo{
        width: 100%;
        height: 13.125rem;
        background: url(https://hshop.honorfile.com/pimages//discountProd/25064876246617846052.png);
        background-size: 100%;
    }
    .shop1{
        width: 20.625rem;
        height: 6.5rem;
        background-color: white;
        margin: 0 auto;
        border-radius: .625rem;
        margin-bottom: .625rem;
        margin-top: -30px;
    }
    .shops{
        width: 20.625rem;
        height: 6.5rem;
        background-color: white;
        margin: 0 auto;
        border-radius: .625rem;
        margin-bottom: .625rem;
        // margin-top: -20px;
    }
    .pho,.pho1{
        width: 4.125rem;
        height: 4.125rem;
        float: left;
        margin-left: .9375rem;
        margin-top: .9375rem;
    }
    .content,.content1{
        width: 12.5rem;
        float: left;
        margin-left: 1.125rem;
        margin-top: .9375rem;
    }
    .title,.title1{
        font-size: .75rem;
        font-weight: 700;
    }
    .cheap,.cheap1{
        font-size: .75rem;
        color: gray;
    }
    .price,.price1{
        display: block;
        width: 3.8125rem;
        height: 1.125rem;
        font-size: .875rem;
        color: white;
        background-color: #fe5363;
        border-radius: .625rem 0 0 .625rem;
        float: left;
        text-align: center;
        margin-top: .625rem;
    }
    .buy,.buy1{
        display: block;
        width: 3.8125rem;
        height: 1.125rem;
        font-size: .75rem;
        color: #fe5363;
        background-color: #ffedee;
        border-radius: 0 .625rem .625rem 0;
        float: left;
        text-align: center;
        margin-top: .625rem;
    }
    img{
        width: 100%;
    }
</style>